<template>
  <div>
    <hzhy-form-renderer
      ref="formRender"
      v-model="formData"
      label-position="top"
      isFull
      :content="content"
    >
    </hzhy-form-renderer>
  </div>
</template>

<script>
import CommonUploadFile from '@/components/common-upload-file'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {},
    }
  },
  computed: {
    content() {
      return [
        {
          $id: 'type',
          $type: 'select',
          label: '布局方式',
          $el: {
            placeholder: '请输入布局方式',
            clearable: true,
          },
          $options: [
            {
              label: '布局一',
              value: '1',
            },
            {
              label: '布局二',
              value: '2',
            },
          ],
        },
        {
          component: CommonUploadFile,
          $id: 'pdfZh',
          label: 'pdf文件(中文)',
          $el: {
            max: 1,
            uploadType: 'file',
            accept: '.pdf',
            showFileList: true,
          },
          inputFormat: ({ pdfZh }) => {
            if (!pdfZh) {
              return []
            }
            const result = []
            pdfZh.split(',').forEach((item) => {
              const name = item.split('/').pop()
              result.push({
                name,
                response: item,
              })
            })
            return result
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return
            }
            return val.map(({ response }) => response).join(',')
          },
        },
        {
          component: CommonUploadFile,
          $id: 'pdfEn',
          label: 'pdf文件(英文)',
          $el: {
            max: 1,
            uploadType: 'file',
            accept: '.pdf',
            showFileList: true,
          },
          inputFormat: ({ pdfEn }) => {
            if (!pdfEn) {
              return []
            }
            const result = []
            pdfEn.split(',').forEach((item) => {
              const name = item.split('/').pop()
              result.push({
                name,
                response: item,
              })
            })
            return result
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return
            }
            return val.map(({ response }) => response).join(',')
          },
        },
        {
          $id: 'titleZh',
          $type: 'input',
          label: '标题(中文)',
          $el: {
            placeholder: '请输入标题(中文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '1')
          },
        },
        {
          $id: 'titleEn',
          $type: 'input',
          label: '标题(英文)',
          $el: {
            placeholder: '请输入标题(英文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '1')
          },
        },
        {
          $id: 'subtitleZh',
          $type: 'input',
          label: '副标题(中文)',
          $el: {
            placeholder: '请输入副标题(中文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '1')
          },
        },
        {
          $id: 'subtitleEn',
          $type: 'input',
          label: '副标题(英文)',
          $el: {
            placeholder: '请输入副标题(英文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '1')
          },
        },
        {
          $id: 'descZh',
          $type: 'input',
          label: '描述(中文)',
          $el: {
            placeholder: '请输入描述(中文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '1')
          },
        },
        {
          $id: 'descEn',
          $type: 'input',
          label: '描述(英文)',
          $el: {
            placeholder: '请输入描述(英文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '1')
          },
        },
        {
          component: CommonUploadFile,
          $id: 'pcImgZh',
          label: '背景图片(PC中文展示)',
          $el: {
            max: 9,
            accept: '.jpg,.jpeg,.png',
          },
          inputFormat: ({ pcImgZh }) => {
            if (!pcImgZh) {
              return []
            }
            const result = []
            pcImgZh.split(',').forEach((item) => {
              result.push({
                name: item,
                response: item,
              })
            })
            return result
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return
            }
            return val.map(({ response }) => response).join(',')
          },
        },
        {
          component: CommonUploadFile,
          $id: 'pcImgEn',
          label: '背景图片(PC英文展示)',
          $el: {
            max: 9,
            accept: '.jpg,.jpeg,.png',
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '2')
          },
          inputFormat: ({ pcImgEn }) => {
            if (!pcImgEn) {
              return []
            }
            const result = []
            pcImgEn.split(',').forEach((item) => {
              result.push({
                name: item,
                response: item,
              })
            })
            return result
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return
            }
            return val.map(({ response }) => response).join(',')
          },
        },
        {
          component: CommonUploadFile,
          $id: 'h5ImgZh',
          label: '背景图片(h5中文展示)',
          $el: {
            max: 9,
            accept: '.jpg,.jpeg,.png',
            tips: '图片最佳尺寸：1920 X 550',
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '2')
          },
          inputFormat: ({ h5ImgZh }) => {
            if (!h5ImgZh) {
              return []
            }
            const result = []
            h5ImgZh.split(',').forEach((item) => {
              result.push({
                name: item,
                response: item,
              })
            })
            return result
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return
            }
            return val.map(({ response }) => response).join(',')
          },
        },
        {
          component: CommonUploadFile,
          $id: 'h5ImgEn',
          label: '背景图片(h5英文展示)',
          $el: {
            max: 9,
            accept: '.jpg,.jpeg,.png',
            tips: '图片最佳尺寸：750 X 750',
          },
          hidden: (data) => {
            // 资源类型为菜单时显示
            return !(data.type && data.type === '2')
          },
          inputFormat: ({ h5ImgEn }) => {
            if (!h5ImgEn) {
              return []
            }
            const result = []
            h5ImgEn.split(',').forEach((item) => {
              result.push({
                name: item,
                response: item,
              })
            })
            return result
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return
            }
            return val.map(({ response }) => response).join(',')
          },
        },
      ]
    },
  },
  watch: {
    componentData: {
      handler(value) {
        // 初始化默认值
        this.formData = { ...value }
      },
      immediate: true,
    },
    formData: {
      handler(value) {
        this.$emit('change', value)
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.banner-item {
}
</style>
